<template>
    <div :class="isYhInfo?'app-container':'app-container-padding'">
        <!--顶部Header区域-->
        <mt-header v-if="!isYhInfo" fixed title="道路货物运输量专项调查" style="z-index: 999999;">
          <span slot="left" @click="goBack">
            <mt-button icon="back" v-show='flag' slot="left">返回</mt-button>
          </span>
            <mt-button icon="more" slot="right" @click.native="headerMore" v-show='tableFlag'></mt-button>
            <mt-button  icon="" slot="right" @click.native="sbCompanines" v-show='sbFlag'>上报</mt-button>
        </mt-header>
        <!--中间路由区域-->
        <transition>
            <router-view></router-view>
        </transition>
        <!--底部Tabbar区域-->
        <div class="mui-bar mui-bar-tab" v-if="toolbalflag">
            <router-link class="mui-tab-item-lib" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item-lib" to="/my">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">我的</span>
            </router-link>
        </div>
        <div class="mui-bar mui-bar-tab" v-if="!toolbalflag&&(this.$route.path == ('/FZBTableCheckSj')||this.$route.path == ('/mySj'))">
                <router-link class="mui-tab-item-lib" to="/FZBTableCheckSj">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页</span>
                </router-link>
                <router-link class="mui-tab-item-lib" to="/mySj">
                    <span class="mui-icon mui-icon-contact"></span>
                    <span class="mui-tab-label">我的</span>
                </router-link>
        </div>
    </div>
</template>

<script>
    import { Indicator } from 'mint-ui';
    import {Toast} from 'mint-ui'
    export default {
        data() {
            return {
                flag: false,
                toolbalflag: true,
                searchflag: true,
                tableFlag: false,
                hpyl: false,
                isYhInfo: true,
                sbFlag: false,
                UserRole: localStorage.getItem("UserRole"),
                loginFlag: localStorage.getItem("loginFlag"),
            };
        },
        watch: {
            '$route.path': function (newVal) {
                this.statusChanges(newVal);
            }
        },
        created() {
            this.status();
            this.getSessionId();
        },
        methods: {
            status(){
                if(this.$route.path === ('/home')){
                    this.isYhInfo = false;
                    this.flag = false;
                    this.searchflag = false;
                }else if(this.$route.path === ('/my')){
                    this.flag = false;
                    this.isYhInfo = false;
                }else if(this.$route.path === ('/login')){
                    this.isYhInfo = false;
                    this.toolbalflag = false;
                    this.flag = true;
                }else if(this.$route.path === ('/FZBTableCheckSj')){
                    this.isYhInfo = false;
                    this.toolbalflag = false;
                    this.flag = false;
                }else{
                    this.isYhInfo = false;
                    this.flag = true;
                    this.toolbalflag = false;
                }
            },
            statusChanges(newVal){
                if (newVal === "/home") {
                    this.isYhInfo = false;
                    this.toolbalflag = true;
                    this.flag = false;
                    this.searchflag = false;
                } else if(newVal === "/message"){
                    this.flag = true;
                    this.sbFlag =true;
                    this.searchflag = false;
                    this.toolbalflag = false;
                }else if(newVal === "/my"){
                    this.toolbalflag = true;
                    this.flag = false;
                    this.searchflag = false;
                }else if (newVal === "/login") {
                    this.flag = true;
                    this.toolbalflag = false;
                }else if(this.UserRole == "货车司机"){
                    this.isYhInfo = false;
                    this.toolbalflag = false;
                    this.flag = false;
                    this.searchflag = false;
                } else {
                    this.flag = true;
                    this.toolbalflag = false;
                }

                if (newVal === "/home/userList") {
                    this.searchflag = true;
                } else {
                    this.searchflag = false;
                }
                if (newVal === "/home/yhinfo:id") {
                    this.isYhInfo = false;
                    this.tableFlag = true;
                    console.log(this.tableFlag);
                } else {
                    this.isYhInfo = false;
                    this.tableFlag = false;
                    clearInterval(this.$store.state.intervalId);
                    clearInterval(this.$store.state.hyclitervalId);
                    console.log(this.tableFlag);
                }
                if(newVal === "/message"){
                    this.sbFlag = true;
                }else{
                    this.sbFlag =false;
                }
                if(newVal === "/home/reportByOther"){
                    this.isYhInfo = true;
                }
            },
            goBack() {
                Indicator.close();
                //点击后退
                if(this.$route.path === ('/login')){
                    this.$router.push({
                        path:'/home'
                    });
                }else{
                    this.$router.go(-1);
                }
                plus.screen.lockOrientation('portrait-secondary');//竖屏正方向
            },
            headerMore() {
                // this.$router.push({path: '/home/checkRules'});
            },
            getSessionId() {
                if (JSON.parse(localStorage.getItem('sessionId')) != null || JSON.parse(localStorage.getItem('sessionId')) != "") {
                    this.$store.commit("changeLoginStatus");
                } else {
                    this.$store.commit("outLogin");
                }
            },
            sbCompanines(){
                this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/report', {
                            'data': {
                                 "recidList": this.$store.state.value,
                                 "userName": localStorage.getItem("userName"),
                                    }
                            }, {
                            'headers': {
                                    'Content-Type': 'application/json',
                                    'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                                    }
                                }).then(result=>{
                                    if (result.data.status === "1000"){ 
                                        Toast(result.data.msg);
                                        console.log(result);
                                    }else if(result.data.status === "1002"||result.data.status === "4001"||result.data.status === "5005"){
                                        this.dateFlag = true;
                                        this.sessionId = "";
                                        localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                        this.$store.commit("outLogin");
                                        this.msg = result.data.msg;
                                        Toast(this.msg);
                                    this.$router.push({
                                        path:'/login'
                                        });
                                    }else if(result.data.status === "1001"){
                                        Toast(result.data.msg);
                                }    
                    }); 
            },
        },
    }
</script>


<style lang="scss" scoped>
    mt-header {
        z-index: 999;
    }

    .app-container-padding {
        padding-top: 40px;
        padding-bottom: 40px;
        //overflow-x: hidden;
    }

    .app-container {
        padding-bottom: 40px;
        //overflow-x: hidden;
    }

    .v-enter {
        opacity: 0;
        transform: translateX(100%);
    }

    .v-leave-to {
        opacity: 0;
        transform: translateX(-100%);
        position: absolute;
    }

    .v-enter-active,
    .v-leave-active {
        transition: all 0.5s ease;
    }

    /*改类名解决tabar无法切换问题*/
    .mui-bar-tab .mui-tab-item-lib.mui-active {
        color: #007aff;
    }

    .mui-bar-tab .mui-tab-item-lib {
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
    }

    .mui-bar-tab .mui-tab-item-lib .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mint-header {
        height: 40px;
        /*padding-top: 30px;*/
    }
</style>
  